<template>
	<view class="indexContent">
		<scroll-view scroll-y="true" enable-flex>
			<!-- 按钮 -->
			<souSuo></souSuo>
			<!-- 轮播 -->
			<view class="banner">
				<swiper :indicator-dots="true" :autoplay="true" :interval="3000" :duration="1000">
					
					<swiper-item class="bannerItem" v-for="(banner,index) in bannerListData" :key="banner.goos_id">
						<view class="swiper">
							<image class="bannerImg" :src="banner.image_src" mode=""></image>
						</view>
					</swiper-item>
					
				</swiper>
			</view>
		</scroll-view>
		<!-- 导航 -->
		<view class="categoryList">
		 
			<view @click="toCotegory" class="categoryItem" v-for="(nav,index) in navListData" :key="index">
			  <image class="categoryImg" :src="nav.image_src"></image>
			</view>
		</view>
		
		<!-- 时装 -->
		<Floor v-for="(floorList,index) in floorListData" :key="index" :floorList="floorList"></Floor>

	</view>
</template>

<script>
	import souSuo from "@/pages/index/compnents/butSousuo/souSuo.vue"
	import Floor from "@/pages/index/compnents/Floor/Floor.vue"
	import {mapGetters,mapState} from 'vuex'
	export default {
		name:'Index',
		components:{
			Floor,
		  souSuo
		},
		data(){
			return {
			}
		},
		mounted() {
			this.getBannerData()
			this.getnavDataList()
			this.getFloorListData()
		},
		methods:{
			//轮播图
			getBannerData(){
				this.$store.dispatch('home/getBannerData')
			},
			toCotegory(){
				uni.reLaunch({
					url:'/pages/cotegory/cotegory'
				})
			},
			//导航栏
			getnavDataList(){
				this.$store.dispatch('home/getnavDataList')
			},
			// 楼层
			getFloorListData(){
				this.$store.dispatch('home/getfloorData')
			}
		},
		computed:{
			...mapGetters('home',['bannerListData','navListData','floorListData']),
			
		},
	}
</script>

<style lang="stylus">
	.indexContent
		height: 100%
		.banner
			.bannerItem
				.swiper
					.bannerImg
						width: 750upx
						height: 340upx
		.categoryList
			display: flex
			justify-content: space-around
		  .categoryItem
				padding: 20upx
				width: 188upx
				height: 210upx
				border-radius: 50%
				display: flex
				flex-direction: column
				align-items: center
		   .categoryImg
					width: 144upx
					height: 162upx
					margin: 10upx 0
		.floor
			.fashionItem
				width: 100%
				margin: 5upx 0
				.fashionImg
					width: 100%
					height: 60upx
			.viewItem
				display: flex
				.viewLift
					margin-right: 10upx
					.viewLiftImg
						width: 250upx
						height: 414upx
				.viewRight
					display: flex
					justify-content: space-between
					flex-wrap: wrap
					.viewRightImg
						width: 240upx
						height: 200upx
</style>
